<template>
  <div>
    <video
      class="video"
      autoplay
      muted
      loop
      x5-video-player-type="h5-page"
      :x5-video-player-fullscreen="false"
      :webkit-playsinline="true"
      :x5-playsinline="true"
      :playsinline="true"
      :fullscreen="false"
      v-is-can-play
      :x-webkit-airplay="true"
      :airplay="'allow'"
      preload="auto"
      poster="@/assets/image/home.png"
    >
      <source src="@/assets/image/home.mp4" type="video/mp4" />
    </video>
  </div>
</template>
<script setup lang="ts">
const video = ref(null);
onMounted(() => {
  if (video.value) {
    video.value.play(); // 手动播放视频
  }
});
</script>
<style lang="scss">
.video {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  object-fit: cover;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}
</style>
